import React from 'react';
import { Icon } from '@ss/mtd-react';
import './UnusualPage.scss';

/**
 * 异常页-无数据 - 无权限
 */

interface IProps {
  /** 无数据 无页面（404）无权限 */
  type?: 'noData' | 'noFound' | 'noPermission';
  /** 提示文案(传null可不显示) */
  tips?: string;
  /** 提示详情 */
  detail?: string | React.ReactNode;
  className?: string;
}

const TEXT_MAP = {
  noData: '暂无数据',
  noFound: '404错误',
  noPermission: '暂无权限',
};

const IconMap = {
  noData: 'barschart-o',
  noPermission: 'lock-o',
};

const UnusualPage = (props: IProps) => {
  const { type, tips, className, detail } = props;
  return (
    <div className={`unusual-page ${className}`}>
      <div className="unusual-page-content">
        {type === 'noFound' ? <span className="unusual-page-content-icon">404</span> : <Icon type={IconMap?.[type]} />}
        {tips !== null && <span className="unusual-page-content-tip">{tips ?? TEXT_MAP?.[type] ?? ''}</span>}
        {detail && <span className="unusual-page-content-detail">{detail}</span>}
      </div>
    </div>
  );
};

UnusualPage.defaultProps = {
  type: 'noData',
  detail: '',
  className: '',
};

export default UnusualPage;
